<template>
  <el-card>
    <div slot="header">
      <span>公开发布</span>
      <span class="desc-text ml10">公开发布后，所有访问的用户都能够填写数据</span>
    </div>
    <p class="desc-text m20 ml35">
      开启后，会生成问卷填写链接，所有即可填写问卷
    </p>
    <el-switch
      v-model="publishStatus" class="ml35" @change="handlePublishChange"
    />
    <url-operate v-if="publishStatus" class="ml25" :link-url="createDataLink" />
    <el-divider />
    <div v-if="publishStatus">
      <el-radio-group v-model="activeName" class="ml35" @input="handleClick">
        <el-radio :label="1">
          生成公开链接
        </el-radio>
        <el-radio :label="2">
          生成样本链接
        </el-radio>
      </el-radio-group>
      <div v-if="activeName == 2">
        <p class="desc-text m20 ml35">
          给链接添加扩展属性值，生成多个链接地址。这些地址可以发布到不同的渠道中，用来区分数据来源
        </p>
        <el-row class="ml20 mb10" :gutter="10">
          <el-col :span="12">
            <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="链接地址：">
                <el-input :value="createDataLink" disabled readonly />
              </el-form-item>
              <!-- <template style="display:flex">
                  <el-form-item label="扩展值：" prop="library" style="display:inline-block">
                    <el-select v-model="ruleForm.library" placeholder="请选择">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item class="aa" style="display:inline-block">
                    <el-select v-model="ruleForm.field" placeholder="请选择" style="margin-left:0">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </template> -->
                
              <el-form-item>
                <el-button type="primary" @click="handleBatchSaveLinkExt">
                  批量生成链接
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-divider />
        <div v-if="publishStatus" class="linkWrap">
          <el-row v-for="ext in batchLinkExtList" :key="ext.id" type="flex" justify="center" align="middle" class="ml20 mb10">
            <el-col :span="3">
              <span class="ext-label one-text-overflow">
                {{ ext.extValue }}
              </span>
            </el-col>
            <el-col :span="20">
              <url-operate :link-url="`${createDataLink}?ybk=${ext.extValue}`"
                           style="margin: 0!important;"
              />
            </el-col>
            <el-col :span="1">
              <i class="el-icon-delete text-danger" @click="handleBatchDeleteLinkExt(ext)" />
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-if="activeName == 1">
        <p class="desc-text m20">
          给链接添加扩展属性值，生成多个链接地址。这些地址可以发布到不同的渠道中，用来区分数据来源
        </p>
        <el-row class="ml20 mb10" :gutter="10">
          <el-col :span="12">
            <el-input :value="createDataLink" disabled readonly />
          </el-col>
          <el-col :span="8">
            <el-form ref="ruleForm2" :model="ruleForm2" :rules="rules2" label-width="100px" class="demo-ruleForm">
              <el-form-item prop="extValue">
                <el-input v-model.trim="ruleForm2.extValue" placeholder="扩展值" />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="handleSaveLinkExt">
              生成链接
            </el-button>
          </el-col>
        </el-row>
        <el-divider />
        <div v-if="publishStatus">
          <el-row v-for="ext in linkExtList" :key="ext.id" type="flex" justify="center" align="middle" class="ml20 mb10">
            <el-col :span="3">
              <span class="ext-label one-text-overflow">
                {{ ext.extValue }}
              </span>
            </el-col>
            <el-col :span="20">
              <url-operate :link-url="`${createDataLink}?ext=${ext.extValue}`"
                           style="margin: 0!important;"
              />
            </el-col>
            <el-col :span="1">
              <i class="el-icon-delete text-danger" @click="handleDeleteLinkExt(ext)" />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import UrlOperate from "./UrlOperate"
import {
  deleteFormLinkExtRequest,
  getFormLinkExtListRequest,
  getFormStatusRequest,
  publishFormRequest,
  saveFormLinkExtRequest,
  stopPublishFormRequest,
  qryLibraryBindInfo,
  batchExt,
  addPublicReleaseSetting
} from "../../../api/project/publish"
export default {
  name: 'DesignatedPublish',
  components: {
    UrlOperate
  },
  data() {
    let handleExtValue = (rule, value, callback) => {
      if(value){
        var reg='^[0-9]*$'
        if(new RegExp(reg).test(value)){
          callback(new Error('不能为纯数字'))
        }else{
          callback()
        }
      }else{
        callback(new Error('请输入扩展名'))
      }
      
    }
    return {
      publishStatus: false,
      createDataLink: '',
      formKey: '',
      linkExtList: [],
      batchLinkExtList: [],
      activeName: 1,
      ruleForm: {
        library:'',
        field:''
      },
      extType: '',
      qryLibrary: true,
      ruleForm2: {
        extValue: ''
      },
      rules2: {
        extValue: [{trigger:'blur',validator:handleExtValue}]
      },
    }
  },
  created() {
    this.formKey = this.$route.query.key
    let url = window.location.protocol + '//' + window.location.host
    this.createDataLink = `${url}/s/${this.formKey}`
    this.getProjectStatus()
    
    // 是否展示批量生成扩展链
    // this.getQryLibraryBindInfo()
    this.getFormLinkExtList()
    this.addPublicReleaseSettingFun()
  },
  methods: {
    handleClick() {
      if(this.activeName == 1){
        this.getFormLinkExtList()
      }else{
        this.getBatchFormLinkExtList()
      }
      this.addPublicReleaseSettingFun()
    },
    addPublicReleaseSettingFun(){
      var publicRelease=this.activeName == 1 ? 'YES' : 'NO'
      addPublicReleaseSetting(
        publicRelease,
        this.formKey
      ).then((res) => {
        if (res.code != 200) {
          this.msgError(res.msg)
        }
      })
    },
    getQryLibraryBindInfo(){
      qryLibraryBindInfo(this.formKey).then((res) => {
        if (res.code == 200) {
          this.qryLibrary=res.data
          if(this.qryLibrary){
            this.activeName = '1'
            this.getBatchFormLinkExtList()
          }else{
            this.activeName = '2'
            this.getFormLinkExtList()
          }
        }
      })
    },
    getProjectStatus() {
      getFormStatusRequest(this.formKey).then((res) => {
        if (res.data.status == 2) {
          this.publishStatus = true
        } else {
          this.publishStatus = false
        }
      })
    },
    getFormLinkExtList() {
      this.extType = 2
      getFormLinkExtListRequest(this.formKey,this.extType).then((res) => {
        this.linkExtList = res.data
      })
    },
    getBatchFormLinkExtList() {
      this.extType = 1
      getFormLinkExtListRequest(this.formKey,this.extType).then((res) => {
        this.batchLinkExtList = res.data
      })
    },
    
    // 批量生成链接
    handleBatchSaveLinkExt(){
      batchExt(this.formKey).then((res) => {
        if(res.code == 200){
          this.msgSuccess('保存成功')
          this.getBatchFormLinkExtList()
        } else{
          this.msgError(res.msg)
        }
        
      })
    },
    handleSaveLinkExt() {
      this.$refs['ruleForm2'].validate((valid) => {
        if (valid) {
          if (!this.ruleForm2.extValue) {
            this.msgWarning('请输入扩展名')
            return
          }
          saveFormLinkExtRequest({
            formKey: this.formKey,
            extValue: this.ruleForm2.extValue
          }).then(() => {
            this.msgSuccess('保存成功')
            this.ruleForm2.extValue = ''
            this.getFormLinkExtList()
          })
        } else {
          return false
        }
      })
      
    },
    handleDeleteLinkExt(row){
      deleteFormLinkExtRequest(row).then(() => {
        this.msgSuccess('删除成功')
        this.getFormLinkExtList()
      })
    },
    handleBatchDeleteLinkExt(row){
      deleteFormLinkExtRequest(row).then(() => {
        this.msgSuccess('删除成功')
        this.getBatchFormLinkExtList()
      })
    },
    handlePublishChange(val) {
      if (val) {
        this.publishProject()
      } else {
        this.stopPublishProject()
      }
    },
    publishProject() {
      publishFormRequest({formKey: this.formKey}).then(() => {
        this.publishStatus = true
        this.msgSuccess('发布成功')
      })
    },
    stopPublishProject() {
      stopPublishFormRequest({formKey: this.formKey}).then((res) => {
        if (res.data) {
          this.msgSuccess('停止成功')
          this.getProjectStatus()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ext-label {
  color: #303133;
}
.aa .el-form-item__content{
  margin-left:0!important
}
.linkWrap{
  max-height:200px;
  overflow-y: scroll;
}
</style>
